﻿@model EditPhonesModel
@using RielAp.Translation;

@{
    Layout = "~/Views/Shared/_ProfileLayout.cshtml";
    ViewBag.ProfileCurrentTab = ProfileViewType.MobileNumbers;
}


                <div class="alert alert-error" style="display:none;" id="maxNumbersReached">
                  @string.Format(Translation.MaxNumbersLimitReached, Model.MaxPhonesNumber)
                </div>
                @using (Html.BeginForm("EditPhones", "Account", null, FormMethod.Post, new { @class = "form-horizontal", style = "width: 700px;  margin: auto;" }))
                {
                    <div class="control-group">
                        <label class="control-label" style="width:200px;" for="Phone">@Translation.CabinetMainUserPhoneLabel</label>
                        <div class="controls" style="margin-left: 220px;">
                            <input type="text" class = "bfh-phone" data-format = "+38 (ddd) ddd-dddd" data-number="@Model.Phone" name="phone">
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <div class="controls" style="margin-left: 220px;">
                            <div id="addUserPhoneBtn" class="btn">@Translation.CabinetAddUserPhoneLabel</div>
                        </div>
                    </div>
                    
                    int i = 0;
                    foreach (RielAp.Domain.Models.MobileNumber number in Model.UserMobileNumbers)
                    {
                        string indexValue = string.Format("m{0}",i);
                        <div class="control-group addintionalNumberContainer">
                            <div class="controls" style="margin-left: 220px;">
                                <input type="hidden" name="index" value="@indexValue"/>
                                <input type="text" class = "bfh-phone" data-format = "+38 (ddd) ddd-dddd" data-number="@number.Number" name="@string.Format("[{0}].Number",indexValue)"/>
                                <input type="hidden" name="@string.Format("[{0}].MobileNumberId",indexValue)" value="@number.MobileNumberId">
                                <div data-mobilenumberid="@number.MobileNumberId"  class="btn deleteUserPhoneBtn">@Translation.CabinetDeleteUserPhoneLabel</div>
                            </div>
                        </div>
                        i++;
                    }
                    
                    foreach (RielAp.Domain.Models.MobileNumber number in Model.EmptyMobileNumbers)
                    {
                        string indexValue = string.Format("m{0}", i);
                        <div class="control-group addintionalNumberContainer" style="display:none;">
                            <div class="controls" style="margin-left: 220px;">
                                <input type="hidden" name="index" value="@indexValue" disabled="disabled"/>
                                <input type="text" class = "bfh-phone" data-format = "+38 (ddd) ddd-dddd" data-number="@number.Number" name="@string.Format("[{0}].Number",indexValue)" disabled="disabled"/>
                                <input type="hidden" name="@string.Format("[{0}].MobileNumberId",indexValue)" value="@number.MobileNumberId" disabled="disabled"/>
                                <div data-mobilenumberid="@number.MobileNumberId"  class="btn deleteUserPhoneBtn">@Translation.CabinetDeleteUserPhoneLabel</div>
                            </div>
                        </div>
                        i++;
                    }
                    
                    <div class="control-group">
                        <div class="controls" style="margin-left: 220px;">
                            <input type="submit" class="btn btn-success" value="@Translation.CabinetSaveLabel"/>
                        </div>
                    </div>
            }
           

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#addUserPhoneBtn').click(function () {
                var container = $(".addintionalNumberContainer:hidden:first");
                if (container.length > 0) {
                    container.show();
                    container.find('input').removeAttr("disabled");
                }
                else {
                    $('#maxNumbersReached').show();

                    setTimeout(function () {
                        $('#maxNumbersReached').hide(500);
                    }, 5000);
                }
            });

            $('.deleteUserPhoneBtn').click(function () {
                $('#maxNumbersReached').hide();
                var deleteBtn = $(this);
                var container = deleteBtn.parents('.control-group');
                container.hide();
                container.find('input').attr("disabled", "disabled");
            });
        });

        
    </script>
    }
